<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
	<div class="centermap">
		<div class="mapwrap">
			<dv-border-box-13>
				<div id="map-container" class="map"></div>
			</dv-border-box-13>
		</div>
	</div>
</template>

<script>
	import {
		currentGET
	} from "api/modules";
	import * as L from "leaflet";
	import "leaflet/dist/leaflet.css"
	import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
	import UtilVar from "@/config/UtilVar";

	export default {
		data() {
			return {
				map: null
			};
		},
		created() {},

		mounted() {
			this.initMap()
		},
		methods: {
			initMap() {
				if (this.map) {
					this.map.off()
					this.map.remove()
				}
				let map = L.map('map-container', {
					crs: L.CRS.Simple,
					zoom: 10, //缩放级别
					minZoom: 0,
					maxZoom: 3,
					zoomControl: true, //缩放组件
					attributionControl: false
				})
				let bounds = [
					[0, 0],
					[605, 684]
				]
				let image = L.imageOverlay(UtilVar.topUrl + '/static/images/gdd.jpg', bounds).addTo(map)
				map.fitBounds(bounds)

				//增加marker
				let latlng = [{
						lat: 220,
						lng: 230,
						popUp: '第二积温带'
					},
					{
						lat: 280,
						lng: 560,
						popUp: '第三积温带'
					},
					{
						lat: 230,
						lng: 420,
						popUp: '第四积温带'
					},
					{
						lat: 350,
						lng: 250,
						popUp: '第五积温带'
					},
					{
						lat: 500,
						lng: 150,
						popUp: '第六积温带'
					},
					{
						lat: 110,
						lng: 330,
						popUp: '第一积温带'
					}
				]

				let group = L.layerGroup().addTo(map)
				for (let i = 0; i < latlng.length; i++) {
					let lat = latlng[i].lat
					let lng = latlng[i].lng
					let blueIcon = L.icon({
						iconUrl: icon,
						iconSize: [25, 41],
						iconAnchor: [13, 21]
					})

					let marker = L.marker([lat, lng], {
						icon: blueIcon,
						draggable: true,
						riseOnHover: true
					}).addTo(group).bindPopup(latlng[i].popUp).openPopup()

				}
				this.map = map
			},
			getData(code) {
				currentGET("big8", {
					regionCode: code
				}).then((res) => {
					if (res.success) {
						this.getGeojson(res.data.regionCode, res.data.dataList);
						this.mapclick();
					} else {
						this.$Message.warning(res.msg);
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.centermap {
		margin-bottom: 30px;

		.maptitle {
			height: 60px;
			display: flex;
			justify-content: center;
			padding-top: 10px;
			box-sizing: border-box;

			.titletext {
				font-size: 28px;
				font-weight: 900;
				letter-spacing: 6px;
				background: linear-gradient(92deg,
						#0072ff 0%,
						#00eaff 48.8525390625%,
						#01aaff 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin: 0 10px;
			}

			.zuo,
			.you {
				background-size: 100% 100%;
				width: 29px;
				height: 20px;
				margin-top: 8px;
			}

			.zuo {
				background: url("../../assets/img/xiezuo.png") no-repeat;
			}

			.you {
				background: url("../../assets/img/xieyou.png") no-repeat;
			}
		}

		.mapwrap {
			height: 638px;
			width: 100%;
			// padding: 0 0 10px 0;
			box-sizing: border-box;
			position: relative;

			.quanguo {
				position: absolute;
				right: 20px;
				top: -46px;
				width: 80px;
				height: 28px;
				border: 1px solid #00eded;
				border-radius: 10px;
				color: #00f7f6;
				text-align: center;
				line-height: 26px;
				letter-spacing: 6px;
				cursor: pointer;
				box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
					0 0 6px rgba(0, 237, 237, 0.4);
			}
		}

		.map {
			width: 95%;
			height: 605px;
			top: 20px;
			left: 20px
		}
	}
</style>